<template>
  <div>
    <el-table
      :data="list"
      border false
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="90">
      </el-table-column>
      <el-table-column
        prop="level"
        label="Level"
        width="90">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">
            <svg class="icon " aria-hidden="true">
              <use xlink:href="#iconbianji3"></use>
            </svg>
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
            <svg class="icon " aria-hidden="true">
              <use xlink:href="#iconicon_delete"></use>
            </svg>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="userName"
      :visible.sync="levelChoose"
      width="70%">
      <el-radio-group v-model="levelChange">
        <div v-for="data of level" :key="data.value">
          <el-radio :label="data.value">{{data.label}}</el-radio><br/>
        </div>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="levelChoose = false">取 消</el-button>
        <el-button type="primary" @click="updateLevel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="deleteUser"
      width="70%">
      <span>确定删除{{userName}}吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteUser = false">取 消</el-button>
        <el-button type="primary" @click="delUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'list',
  data () {
    return {
      userName: '',
      deleteUser: false,
      levelChoose: false,
      levelChange: Number,
      list: [],
      level: [
        {
          value: this.PI,
          label: 'PI'
        },
        {
          value: this.PR,
          label: 'PR'
        },
        {
          value: this.assistant,
          label: 'assistant'
        },
        {
          value: this.student,
          label: 'student'
        },
        {
          value: this.stranger,
          label: 'stranger'
        }
      ]
    }
  },
  methods: {
    getUserList () {
      axios.get(this.url + '/user/list')
        .then(this.getUserListSucc)
    },
    getUserListSucc (res) {
      if (res.status === 200) {
        const data = res.data
        this.list = data
      }
    },
    handleEdit (index, row) {
      this.levelChoose = true
      sessionStorage.setItem('uid', row.id)
      this.levelChange = row.level
      this.userName = row.name
    },
    handleDelete (index, row) {
      this.deleteUser = true
      this.userName = row.name
      sessionStorage.setItem('uid', row.id)
    },
    delUser () {
      this.$axios({
        method: 'delete',
        url: this.url + '/user/id/' + sessionStorage.getItem('uid')
      }).then((res) => {
        if (res.status === 200) {
          alert('删除成功！')
          axios.get(this.url + '/user/list')
            .then(this.getUserListSucc)
          this.deleteUser = false
        }
      }).catch((err) => {
        alert(err)
      })
    },
    updateLevel () {
      this.$axios({
        method: 'put',
        url: this.url + '/user/update',
        data: {
          id: parseInt(sessionStorage.getItem('uid')),
          level: this.levelChange
        }
      }).then((user) => {
        if (user.status === 200) {
          alert('修改成功！')
          axios.get(this.url + '/user/list')
            .then(this.getUserListSucc)
          this.levelChoose = false
        } else {
          alert(user.data)
        }
      }).catch((err) => {
        alert(err)
      })
    }
  },
  mounted () {
    this.getUserList()
  }
}
</script>

<style scoped>

</style>
